<template>
  <!-- 最外层的大盒子 -->
  <div class="bigBox">
    <div class="box">
      <!-- 滑动盒子 -->
      <div class="pre-box" ref="preRef">
        <h1>WELCOME</h1>
        <p>JOIN US!</p>
        <div class="img-box">
          <img :src="flag ? imgList[1] : imgList[0]" alt="" />
        </div>
      </div>
      <!-- 注册盒子 -->
      <div class="register-form">
        <!-- 标题盒子 -->
        <div class="title-box">
          <h1>注册</h1>
        </div>
        <!-- 输入框盒子 -->
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="registerRuleForm"
          label-width="90px"
        >
          <div class="input-box">
            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="ruleForm.username"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="ruleForm.password"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="password2">
              <el-input
                type="password"
                v-model="ruleForm.password2"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>

        <!-- 按钮盒子 -->
        <div class="btn-box">
          <el-button @click="register">注册</el-button>
          <!-- 绑定点击事件 -->
          <p
            @click="mySwitch"
            style="font-size: 14px; font-family: 楷书; margin-top: 25px"
          >
            已有账号?去登录
          </p>
        </div>
      </div>
      <!-- 登录盒子 -->
      <div class="login-form">
        <!-- 标题盒子 -->
        <div class="title-box">
          <h1>登录</h1>
        </div>
        <!-- 输入框盒子 -->
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="90px"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-radio-group v-model="radio" style="margin-left: 180px">
          <el-radio :label="1">用户</el-radio>
          <el-radio :label="2">管理员</el-radio>
        </el-radio-group>
        <!-- 按钮盒子 -->
        <div class="btn-box">
          <el-button @click="login" style="font-size: 16px">登录</el-button>
          <!-- 绑定点击事件 -->
          <p
            @click="mySwitch"
            style="font-size: 14px; font-family: 楷书; margin-top: 25px"
          >
            没有账号?去注册
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<!--<script setup>-->
<!--import { ref } from 'vue'-->

<!--const preRef=ref('')-->
<!--const imgList = ref([require('@/assets/wuwu.jpeg'),require('@/assets/waoku.jpg')])-->
<!--let flag = ref(true)-->
<!--const mySwitch = () =>{-->
<!--  if(flag.value){-->
<!--    preRef.value.style.background = '#c9e0ed'-->
<!--    preRef.value.style.transform = 'translateX(100%)'-->
<!--  }else{-->
<!--    preRef.value.style.background = '#edd4dc'-->
<!--    preRef.value.style.transform = 'translateX(0%)'-->
<!--  }-->
<!--  flag.value = !flag.value-->
<!--}-->
<!--const login = () =>{-->

<!--}-->
<!--</script>-->

<script>
import axios from 'axios'
// 获取token并解析
import { jwtDecode } from 'jwt-decode'
import router from '@/router'

export default {
  data() {
    return {
      preRef: null,
      imgList: [require('@/assets/wuwu.jpeg'), require('@/assets/waoku.jpg')],
      flag: true,

      radio: 1,

      ruleForm: {
        username: '',
        password: '',
        password2: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          {
            min: 6,
            max: 18,
            message: '长度在 6 到 18 个字符',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
          {
            min: 6,
            max: 18,
            message: '长度在 6 到 18 个字符',
            trigger: 'blur',
          },
          {
            pattern: /^(\w){6,18}$/,
            message: '只能输入6-18个字母、数字、下划线',
            trigger: 'blur',
          },
        ],
        password2: [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'))
              } else if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'))
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
      },
    }
  },
  mounted() {
    this.preRef = this.$refs.preRef
  },
  methods: {
    mySwitch() {
      if (this.flag) {
        this.preRef.style.background = '#c9e0ed'
        this.preRef.style.transform = 'translateX(100%)'
      } else {
        this.preRef.style.background = '#edd4dc'
        this.preRef.style.transform = 'translateX(0%)'
      }
      this.flag = !this.flag
    },

    register() {
      this.$refs['registerRuleForm'].validate((res) => {
        if (res) {
          var param = new FormData()
          param.append('username', this.ruleForm.username)
          param.append('password', this.ruleForm.password)
          axios({
            url: 'http://localhost:1111/student/register',
            method: 'post',
            data: param,
          }).then((obj) => {
            if (obj.data.code === 200) {
              this.$message.success(obj.data.message)
              setTimeout(() => {
                this.mySwitch()
                this.$refs['ruleForm'].resetFields()
              }, 1500)
            } else {
              this.$message.warning(obj.data.message)
            }
          })
        } else {
          this.$message.error('请填写正确的数据')
        }
      })
    },

    login() {
      this.$refs['ruleForm'].validate((res) => {
        if (res) {
          //发送登录请求
          let param = new FormData()
          param.append('username', this.ruleForm.username)
          param.append('password', this.ruleForm.password)
          if (this.radio === 1) {
            axios({
              url: 'http://localhost:1111/student/login',
              method: 'post',
              data: param,
            }).then((obj) => {
              if (obj.data.code === 200) {
                // 获取登录成功后，后端返回的登录用户信息
                let token = obj.data.data
                // 将数据存储到session中
                // JSON.stringify将json对象转换为字符串
                localStorage.setItem('token', token)
                setTimeout(function () {
                  router.push('/clubIndex')
                }, 1500)
              } else {
                this.$message.warning(obj.data.message)
              }
            })
          } else {
            axios({
              url: 'http://localhost:1111/admin/login',
              method: 'post',
              data: param,
            }).then((obj) => {
              if (obj.data.code === 200) {
                // 获取登录成功后，后端返回的登录用户信息
                var token = obj.data.data
                // 将数据存储到session中
                // JSON.stringify将json对象转换为字符串
                localStorage.setItem('token', token)
                this.$message.success(obj.data.message)
                setTimeout(function () {
                  router.push('/index')
                }, 1500)
              } else {
                this.$message.warning(obj.data.message)
              }
            })
          }
        } else {
          this.$message.error('请填写数据')
        }
      })
    },
  },
}
</script>

<style scoped>
input {
  outline: none;
}
.bigBox {
  /* 溢出隐藏 */
  height: 100vh;
  overflow-x: hidden;
  display: flex;
  /* 渐变方向从左到右 */
  background: linear-gradient(to right, rgb(247, 209, 215), rgb(191, 227, 241));
}

span {
  position: absolute;
  z-index: 0;
  bottom: 0;
  border-radius: 50%;
  /* 径向渐变 */
  background: radial-gradient(
    circle at 72% 28%,
    #fff 3px,
    #ff7edf 8%,
    #5b5b5b,
    #aad7f9 100%
  );
  /* 泡泡内阴影 */
  box-shadow:
    inset 0 0 6px #fff,
    inset 3px 0 6px #eaf5fc,
    inset 2px -2px 10px #efcde6,
    inset 0 0 60px #f9f6de,
    0 0 20px #fff;
  /* 动画 */
  animation: myMove 4s linear infinite;
}

@keyframes myMove {
  0% {
    transform: translateY(0%);
    opacity: 1;
  }

  50% {
    transform: translate(10%, -1000%);
  }

  75% {
    transform: translate(-20%, -1200%);
  }

  99% {
    opacity: 0.9;
  }

  100% {
    transform: translateY(-1800%) scale(1.5);
    opacity: 0;
  }
}

/* 最外层的大盒子 */
.box {
  width: 1050px;
  height: 600px;
  display: flex;
  /* 相对定位 */
  position: relative;
  z-index: 2;
  margin: auto;
  /* 设置圆角 */
  border-radius: 8px;
  /* 设置边框 */
  border: 1px solid rgba(255, 255, 255, 0.6);
  /* 设置盒子阴影 */
  box-shadow: 2px 1px 19px rgba(0, 0, 0, 0.1);
}

/* 滑动的盒子 */
.pre-box {
  /* 宽度为大盒子的一半 */
  width: 50%;
  /* width: var(--width); */
  height: 100%;
  /* 绝对定位 */
  position: absolute;
  /* 距离大盒子左侧为0 */
  left: 0;
  /* 距离大盒子顶部为0 */
  top: 0;
  z-index: 99;
  border-radius: 4px;
  background-color: #edd4dc;
  box-shadow: 2px 1px 19px rgba(0, 0, 0, 0.1);
  /* 动画过渡，先加速再减速 */
  transition: 0.5s ease-in-out;
}

/* 滑动盒子的标题 */
.pre-box h1 {
  margin-top: 150px;
  text-align: center;
  /* 文字间距 */
  letter-spacing: 5px;
  color: white;
  /* 禁止选中 */
  user-select: none;
  /* 文字阴影 */
  text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
}

/* 滑动盒子的文字 */
.pre-box p {
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 20px 0;
  /* 禁止选中 */
  user-select: none;
  font-weight: bold;
  color: white;
  text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
}

/* 图片盒子 */
.img-box {
  width: 200px;
  height: 200px;
  margin: 20px auto;
  /* 设置为圆形 */
  border-radius: 50%;
  /* 设置用户禁止选中 */
  user-select: none;
  overflow: hidden;
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
}

/* 图片 */
.img-box img {
  width: 100%;
  transition: 0.5s;
}

/* 登录和注册盒子 */
.login-form,
.register-form {
  flex: 1;
  height: 100%;
}

/* 标题盒子 */
.title-box {
  height: 242px;
  line-height: 386px;
}

/* 标题 */
.title-box h1 {
  text-align: center;
  color: white;
  /* 禁止选中 */
  user-select: none;
  letter-spacing: 5px;
  text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1);
}

/* 输入框盒子 */
.el-input {
  width: 360px;
}

/* 输入框 */
input {
  width: 60%;
  height: 40px;
  margin-bottom: 20px;
  text-indent: 10px;
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 120px;
  /* 增加磨砂质感 */
  backdrop-filter: blur(10px);
}

input:focus {
  /* 光标颜色 */
  color: #b0cfe9;
}

/* 聚焦时隐藏文字 */
input:focus::placeholder {
  opacity: 0;
}

/* 按钮盒子 */
.btn-box {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  margin-left: 50px;
}

/* 按钮 */
button {
  width: 100px;
  margin: 0 7px;
  line-height: 30px;
  border: none;
  border-radius: 4px;
  background-color: #69b3f0;
  color: white;
}
</style>
